.chat-container{
  width: 100%;
  height: 420px;
  overflow: scroll;
  margin: 0;
  padding: 0;
}
.robot{
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding:1rem 0.8rem;
  position:relative;
  img{
    width: 3.5rem;
    height: 3.5rem;
    float: left;
    border-radius: 50%;

  }
  span{
    display:block;
    max-width:70%;
    min-height:2.5rem;
    word-wrap: break-word;
    color:white;
    margin-top:0.4rem;
    padding:0rem 1rem 0rem 1rem;
    line-height:2.5rem;
    margin-left:1rem;
    display:inline-block;
    background:#49A849;
    border-radius:1rem;
    &:before{
      position:absolute;
      content:"\00a0";
      width:0px;
      height:0px;
      border-width:1rem 1rem 1rem 0;
      border-style:solid;
      border-color:transparent #49A849 transparent transparent;
      top:1.8rem;
      left:4.9rem;
      z-index:0;
    }
  }
}

.user{
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding:1rem 0.8rem;
  position:relative;
  height: 55px;
  img{
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    float: right;
    border: 0;
  }
  &>span{
    max-width:70%;
    margin-right:1rem;
    min-height:2.5rem;
    word-wrap: break-word;
    color:white;
    margin-top:0.4rem;
    padding:0rem 1rem 0rem 1rem;
    line-height:2.5rem;
    margin-left:1rem;
    display:inline-block;
    background:#4682B4;
    border-radius:1rem;
    float: right;
    position: relative;
     span{
       position: absolute;
       width: 0px;
       height: 0px;
       border-width: 1rem 1rem 1rem 1rem;
       border-style: solid;
       border-color: transparent transparent transparent #4682B4;
       top: 0.4rem;
       right: -1.3rem;
       z-index: 0;
    }
  }
}



